<template>
	<view>
		<view class="loader"></view>
	</view>
</template>

<script>
</script>

<style>
	.loader {
		width: 60px;
		height: 14px;
		box-shadow: 0 2px 0 #0073FF;
		position: relative;
		clip-path: inset(-40px 1px -5px);
	}

	.loader:before {
		content: "";
		position: absolute;
		inset: auto calc(50% - 17px) 0;
		height: 50px;
		--g: no-repeat linear-gradient(#d2d3e0 0 0);
		background: var(--g), var(--g), var(--g), var(--g);
		background-size: 16px 14px;
		animation: l7-1 2s infinite linear, l7-2 2s infinite linear;
	}

	@keyframes l7-1 {

		0%,
		100% {
			background-position: 0 -50px, 100% -50px;
		}

		17.5% {
			background-position: 0 100%, 100% -50px, 0 -50px, 100% -50px;
		}

		35% {
			background-position: 0 100%, 100% 100%, 0 -50px, 100% -50px;
		}

		52.5% {
			background-position: 0 100%, 100% 100%, 0 calc(100% - 16px), 100% -50px;
		}

		70%,
		98% {
			background-position: 0 100%, 100% 100%, 0 calc(100% - 16px),
				100% calc(100% - 16px);
		}
	}

	@keyframes l7-2 {

		0%,
		70% {
			transform: translate(0);
		}

		100% {
			transform: translate(200%);
		}
	}
</style>